<!DOCTYPE html>
<html>
  <head>
    <title>WebGL</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html, body, #map {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

    <!-- Mapbox GL -->
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css" rel='stylesheet' />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js"></script>
  </head>
  <body>
  <div id="map"></div>
  <script src="../leaflet-mapbox-gl.js"></script>
  <script>
  var leafletMap = L.map('map').setView([38.912753, -77.032194], 2);

  L.marker([38.912753, -77.032194])
    .bindPopup("Hello <b>Leaflet GL</b>!<br>Whoa, it works!")
    .addTo(leafletMap)
    .openPopup();

  var gl = L.mapboxGL({
    padding: 0.1,
    accessToken: 'no-token',
    // get your own MapTiler token at https://cloud.maptiler.com/ or use MapBox style
    style: 'https://api.maptiler.com/maps/basic/style.json?key=gbetYLSD5vR8MdtZ88AQ',
    interactive: true
  }).addTo(leafletMap);

  var mapboxMap = gl.getMapboxMap();

  mapboxMap.on('load', () => {
    console.log('MAPBOX map loaded');

    // let's see events on mapbox map
    mapboxMap.on('mousemove', () => { console.log('MAPBOX mousemove') });
    mapboxMap.on('mouseenter', () => { console.log('MAPBOX mouseenter') });
    mapboxMap.on('mouseout', () => { console.log('MAPBOX mouseout') });
    mapboxMap.on('mouseleave', () => { console.log('MAPBOX mouseleave') });
    mapboxMap.on('mouseover', () => { console.log('MAPBOX mouseover') });

    // let's add some layer and fire events on it

    mapboxMap.addSource('states', {
      'type': 'geojson',
      'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
    });
    mapboxMap.addLayer({
      'id': 'state-fills',
      'type': 'fill',
      'source': 'states',
      'layout': {},
      'paint': {
        'fill-color': '#627BC1',
        'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 1, 0.5 ]
      }
    });

    mapboxMap.on('mouseenter', 'state-fills', (e) => {console.log('state-fills mouseenter', e) });
    mapboxMap.on('mousemove', 'state-fills', (e) => {console.log('state-fills mousemove', e) });
    mapboxMap.on('mouseout', 'state-fills', (e) => {console.log('state-fills mouseout', e) });
    mapboxMap.on('mouseleave', 'state-fills', (e) => {console.log('state-fills mouseleave', e) });

  });

  // now let's see on leaflet map events
  // SPOILER: they are works
  leafletMap.on('mousemove', () => { console.log('LEAFLET mousemove') });
  leafletMap.on('mouseenter', () => { console.log('LEAFLET mouseenter') });
  leafletMap.on('mouseout', () => { console.log('LEAFLET mouseout') });
  leafletMap.on('mouseleave', () => { console.log('LEAFLET mouseleave') });
  leafletMap.on('mouseover', () => { console.log('LEAFLET mouseover') });
    </script>
  </body>
</html>
